<template>
	<view>
		<view class="top-title defalut-bg padding6">
			<view class="left-title">维修设备信息</view>
			<view class="status"
				:class="[dataInfo.repairStatus==1||dataInfo.repairStatus==3?'title-dyz':dataInfo.repairStatus==2||dataInfo.repairStatus==5?'title-ongoing':dataInfo.repairStatus==9||dataInfo.repairStatus==4?'title-close':'']">
				{{dataInfo.repairStatus==1?'待维修':dataInfo.repairStatus==2?'维修中':dataInfo.repairStatus==3?'待验证':dataInfo.repairStatus==5?'维修完成':dataInfo.repairStatus==9?'维修关闭':'关闭-待验证'}}
			</view>
		</view>
		<view class="detail-title white-bg detail-title-border">
			<view class="left-title">设备名称</view>
			<view class="right-title">{{dataInfo.deviceName}}</view>
		</view>
		<view class="detail-title white-bg detail-title-border">
			<view class="left-title">设备编号</view>
			<view class="right-title">{{dataInfo.deviceNum}}</view>
		</view>
		<view class="detail-title white-bg">
			<view class="left-title">设备型号</view>
			<view class="right-title">{{dataInfo.deviceModelName}}</view>
		</view>
		<view class="detail-title2">
			故障信息
		</view>
		<view class="detail-title detail-title-border">
			<view class="left-title">故障等级</view>
			<view class="right-title">{{dataInfo.failureLevel}}</view>
		</view>
		<view class="detail-title-colum detail-title-border">
			<view class="left-title">故障描述</view>
			<view class="right-title">{{dataInfo.description}}</view>
		</view>
		<view class="detail-title detail-title-border">
			<view class="left-title">故障类型</view>
			<view class="right-title">{{dataInfo.failureCategory}}</view>
		</view>
		<view class="detail-title-colum detail-title-border">
			<view class="left-title">故障现象</view>
			<view class="right-title">{{dataInfo.failurePhenomenon}}</view>
		</view>
		<view class="detail-title-colum detail-title-border">
			<view class="left-title">解决方案</view>
			<view class="right-title">{{dataInfo.solution}}</view>
		</view>
		<view v-if="dataInfo.repairStatus==9||dataInfo.repairStatus==4">
			<view class="detail-title2">
				关闭维修
			</view>
			<view class="detail-title detail-title-border">
				<view class="left-title">关闭维修原因</view>
				<view class="right-title">{{dataInfo.closeReason}}</view>
			</view>
			<view class="gz-icon1" v-if="dataInfo.closePictures">
				<view class="title">相关照片</view>
				<view class="icon-list">
					<image style="width: 210rpx;height: 210rpx;margin: 6rpx;" @tap="previewImage(v,closeImgList)"
						v-for="v in closeImgList" :src="v"></image>
					<video class="videoList" v-for="v in closeVideoList" :src="v" controls></video>
				</view>
			</view>
			<view class="detail-title detail-title-border">
				<view class="left-title">提交人</view>
				<view class="right-title">{{dataInfo.createUserName}}</view>
			</view>
			<view class="detail-title detail-title-border">
				<view class="left-title">提交时间</view>
				<view class="right-title">{{dataInfo.createTime}}</view>
			</view>
		</view>
		<view class="top-title defalut-bg padding6">
			<view class="left-title">维修信息</view>
			<view class="right-title" style="font-size: 28rpx;color: #666666;">维修工单号：{{dataInfo.repairOrderNum}}</view>
		</view>
		<view class="detail-title detail-title-border">
			<view class="left-title">维修类型</view>
			<view class="right-title">{{dataInfo.repairType==1?'内部维修':dataInfo.repairType==2?'委外维修':''}}</view>
		</view>
		<view class="detail-title-colum detail-title-border">
			<view class="left-title">维修内容</view>
			<view class="right-title">{{dataInfo.content}}</view>
		</view>
		<view class="gz-icon1" v-if="dataInfo.repairPictures">
			<view class="title">维修照片</view>
			<view class="icon-list">
				<image style="width: 210rpx;height: 210rpx;margin: 6rpx;" @tap="previewImage(v,imgList)"
					v-for="v in imgList" :src="v"></image>
				<video class="videoList" v-for="v in videoList" :src="v" controls></video>

			</view>
		</view>
		<view class="detail-title3" v-if="dataInfo.partList&&dataInfo.partList.length>0">
			维修备件列表
		</view>
		<view class="list-wrapper2">
			<u-gap height="1" bgColor="#f2f2f2"></u-gap>
			<view class="list-item" v-for="(item,index) in dataInfo.partList" :key="index">
				<view class="left-icon">
					<image :src="item.partPicture?item.partPicture:'../../../static/images/index/weibaorenwu.png'">
					</image>
				</view>
				<view class="right-txt">
					<view class="txt1">{{item.partNum?item.partNum+'-':''}}{{item.partName}}</view>
					<view class="txt3">
						<view style="width:200rpx;">{{item.partTypeName}}</view>
						<view style="width:200rpx; margin-left: 20rpx;text-align: right;">使用数量：{{item.totalAmount}}
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="detail-title white-bg detail-title-border">
			<view class="left-title">维修厂家</view>
			<view class="right-title">{{dataInfo.repairFactory}}</view>
		</view>
		<view class="detail-title white-bg detail-title-border">
			<view class="left-title">外部维修费用</view>
			<view class="right-title">{{dataInfo.outsourceFee||0}}元</view>
		</view>
		<view class="detail-title white-bg detail-title-border">
			<view class="left-title">内部维修费用</view>
			<view class="right-title">{{dataInfo.repairFee?dataInfo.repairFee:'0'}}元</view>
		</view>
		<view class="detail-title white-bg detail-title-border">
			<view class="left-title">维修总费用</view>
			<view class="right-title">{{getTotalPrice(dataInfo)}}元</view>
		</view>
		<view class="detail-title white-bg detail-title-border">
			<view class="left-title">维修人</view>
			<view class="right-title">{{dataInfo.repairUserName}}</view>
		</view>
		<view class="detail-title-colum detail-title-colum2 detail-title-border">
			<view class="left-title">维修时间</view>
			<view class="right-title">{{dataInfo.startTime!=''?dataInfo.startTime+'至':''}}{{dataInfo.endTime}}</view>
		</view>
		<view class="" v-if="fileList2.length>0">
			<view class="detail-title3" v-if="fileList2.length>0">
				附件
			</view>
			<view class="bx-upload">
				<view v-for="(item,index) in fileList2" :key="index">
					<view class="tab-list">
						<view class="tab-left">
							<image src="../../../static/images/beijian/wenjian.png"></image>
						</view>
						<view class="tab-right">
							<view class="data-txt">
								<view class="txt1">{{item.label}}</view>
								<view class="txt2">{{item.time}}</view>
							</view>
							<view style="color: #0F53AC;width: 80rpx;text-align: center;"
								@click="getNewFileUrl(item.url,item.label)">
								查看
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="detail-title-colum detail-title-colum2">
			<view class="left-title width4">维修验证提交时间</view>
			<view class="right-title">{{dataInfo.verifySubmitTime?dataInfo.verifySubmitTime:''}}</view>
		</view>
		<view class="detail-title2">
			验证信息
		</view>
		<view class="detail-title detail-title-border">
			<view class="left-title">验证结果</view>
			<view class="right-title">
				{{dataInfo.verifyStatus===0?'待验证':dataInfo.verifyStatus==1?'通过':dataInfo.verifyStatus==2?'不通过':''}}
			</view>
		</view>
		<view class="detail-title detail-title-border" v-if="dataInfo.verifyReason">
			<view class="left-title">原因</view>
			<view class="right-title">
				{{dataInfo.verifyReason}}
			</view>
		</view>
		<view class="detail-title detail-title-border">
			<view class="left-title">验证人</view>
			<view class="right-title">{{dataInfo.verifyUserName}}</view>
		</view>
		<view class="detail-title detail-title-border" v-if="dataInfo.repairStatus!=3">
			<view class="left-title">验证时间</view>
			<view class="right-title">{{dataInfo.verifyTime}}</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				imgList: [],
				videoList: [],
				closeImgList: [],
				closeVideoList: [],
				list: [{
						title: "先导活塞式蒸汽减压阀先导活塞式蒸汽减压阀先导活塞式蒸汽减压...",
						txt1: "设备类型显示",
						num: "3",
						price: "3000元"
					},
					{
						title: "先导活塞式蒸汽减压阀先导活塞式蒸汽减压阀先导活塞式蒸汽减压...",
						txt1: "设备类型显示",
						num: "36",
						price: "5000元"
					}
				],
				urls1: [
					'https://cdn.uviewui.com/uview/album/1.jpg',
					'https://cdn.uviewui.com/uview/album/2.jpg',
					'https://cdn.uviewui.com/uview/album/3.jpg',
					'https://cdn.uviewui.com/uview/album/4.jpg',
					'https://cdn.uviewui.com/uview/album/5.jpg',
					'https://cdn.uviewui.com/uview/album/6.jpg',
					'https://cdn.uviewui.com/uview/album/7.jpg',
					'https://cdn.uviewui.com/uview/album/8.jpg',
					'https://cdn.uviewui.com/uview/album/9.jpg',
					'https://cdn.uviewui.com/uview/album/10.jpg',
				],
				fileList2: [],
				repairOrderNum: '', //维修工单号
				dataInfo: {}
			}
		},
		onLoad(options) {
			if (options.orderNum) {
				this.repairOrderNum = options.orderNum
			}
			this.getlistInfo()
		},
		methods: {
			previewImage: function(e, s) {
				uni.previewImage({
					current: e,
					urls: s,
				});
			},
			//处理判断是图片还是video
			handleFileList(data) {
				let repairPictures = data.repairPictures
				let closePictures = data.closePictures
				if (repairPictures) {
					let fileList = repairPictures.split(",")
					fileList.forEach(item => {
						let str = item.split('?')[0]
						if (str.substring(str.length - 3, str.length) == 'mp4') {
							this.videoList.push(item)
						} else {
							this.imgList.push(item)
						}
					})
				}
				if (closePictures) {
					let fileList = closePictures.split(",")
					fileList.forEach(item => {
						let str = item.split('?')[0]
						if (str.substring(str.length - 3, str.length) == 'mp4') {
							this.closeVideoList.push(item)
						} else {
							this.closeImgList.push(item)
						}
					})
				}
			},
			//处理图片
			getpictureList(pictureinfo) {
				if (pictureinfo) {
					var splitAdd = pictureinfo.split(",");
					return splitAdd
				} else {
					return []
				}
			},
			getlistInfo() {
				const that = this
				uni.$u.http.get(`/device/mobile/deviceRepair/repairDetailByOrderNum/${this.repairOrderNum}`).then(res => {
					console.log('res===>', res)
					if (res.code == 0) {
						that.dataInfo = res.data;
						that.handleFileList(res.data)
						that.handleAnnex(res.data.fileNames, res.data.fileUrls, res.data.fileSizes)
					}
				}).catch(err => {})
			},
			getTotalPrice(dataInfo) {
				let price = dataInfo.outsourceFee + dataInfo.repairFee
				return price
			},
			//处理附件数据
			handleAnnex(name, url, size) {
				let nameArr = name.split(',')
				let urlArr = url.split(',')
				let sizeArr = size.split(',')
				console.log('sizeArr', sizeArr, urlArr)
				if (urlArr.length > 0 && urlArr[0] != "") {
					for (let i = 0; i < nameArr.length; i++) {
						let obj = {
							label: nameArr[i],
							url: urlArr[i],
							size: sizeArr[i]
						}
						this.fileList2.push(obj)
					}
				} else {
					this.fileList2 = []
				}
			},
			getNewFileUrl(fileUrl, fileName) {
				uni.$u.http.get(`/base/upload/bindFileUrlByFileName?fileUrl=${fileUrl}&fileName=${fileName}`).then(res => {
					this.lookAnnex(res.data, fileName)
				})
			},


			lookAnnex(fileUrl, fileName) {
				console.log(fileUrl, 'fileUrl')
				let that = this
				uni.downloadFile({
					url: fileUrl, //下载地址，后端接口获取的链接
					filePath: wx.env.USER_DATA_PATH + '/' + fileName,
					success: (data) => {
						if (data.statusCode === 200) {
							//预览
							var filePath = data.filePath;
							// let str = data.filePath.split(".")[1]
							// if (fileType.filter(item => item == str).length > 0) {
							uni.openDocument({
								filePath: filePath,
								showMenu: true,
								success: function(res) {}
							});
						}
					},
					fail: (err) => {
						console.log(err);
						uni.showToast({
							icon: 'none',
							mask: true,
							title: '失败请重新下载',
						});
					},
				});
			},
		}
	}
</script>

<style lang="scss">
	.list-wrapper {
		// padding-bottom: 30rpx;
		// border-bottom: 1px solid #f2f2f2;

		.list-item {
			display: flex;
			padding: 32rpx;
			background: #fff;
			border-radius: 4px;
			border-bottom: 1px solid #f2f2f2;
			// margin: 10rpx 32rpx;

			.left-icon {
				border-radius: 8rpx;

				image {
					width: 152rpx;
					height: 152rpx;

				}
			}

			.right-txt {
				padding-left: 32rpx;
				width: 100%;

				.txt1 {
					font-size: 32rpx;
					color: #2B2B2B;
					overflow: hidden;
					text-overflow: ellipsis;
					display: -webkit-box;
					-webkit-line-clamp: 2;
					-webkit-box-orient: vertical;

				}

				.txt2 {
					color: #8c8c8c;
					font-size: 28rpx;
					margin: 10rpx 0;
				}

				.txt3 {
					display: flex;
					justify-content: space-between;
					align-items: center;
					// margin: 10rpx 0;
					color: #8c8c8c;
					font-size: 28rpx;
					margin-top: 75rpx;
				}
			}
		}
	}

	.gz-icon1 {
		padding: 30rpx;
		border-bottom: 1px solid #f2f2f2;

		.title {
			font-size: 32rpx;
			color: #666666;
		}

		.icon-list {
			display: grid;
			grid-gap: 12rpx;
			grid-template-columns: repeat(3, 218rpx);
			padding-top: 20rpx;

			image {
				width: 218rpx;
				height: 218rpx;

			}

			video {
				width: 218rpx;
				height: 218rpx;
			}
		}
	}

	.list-item :last-child {
		border-bottom: none;
	}

	.detail-title-colum {
		display: flex;
		justify-content: flex-start;
		flex-direction: column;
		padding: 20rpx 30rpx;
		font-size: 32rpx;

		.left-title {
			color: #666666;
		}

		.right-title {
			word-wrap: break-word;
			word-break: break-all;
			color: #2b2b2b;
			margin-top: 20rpx;
		}
	}

	.detail-title-colum2 {
		display: flex;
		padding: 32rpx 30rpx;
		justify-content: space-between;
		flex-direction: initial;
		font-size: 32rpx;

		.left-title {
			color: #666666;
		}

		.right-title {
			word-wrap: break-word;
			word-break: break-all;
			color: #2b2b2b;
			width: 41%;
			margin-top: 0;
			text-align: right;
		}
	}

	.bx-upload {
		padding: 20rpx 30rpx;
		background: #fff;
	
		.tab-list {
			display: flex;
			padding: 24rpx 0 24rpx 20rpx;
			border-radius: 8rpx;
			background: #f2f2f2;
			margin-top: 20rpx;
	
			.tab-left {
				border-radius: 8rpx;
				display: flex;
				align-items: center;
	
				image {
					width: 96rpx;
					height: 96rpx;
					border-radius: 8rpx;
				}
	
				.iconfontsize {
					font-size: 40rpx;
					color: #0F53AC;
				}
			}
	
			.tab-right {
				width: 100%;
				padding: 0 32rpx 0 20rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
	
				.data-txt {
					flex: 1;
	
					.txt1 {
						// width: 550rpx;
						font-size: 28rpx;
						color: #2B2B2B;
						overflow: hidden;
						text-overflow: ellipsis;
						display: -webkit-box;
						-webkit-line-clamp: 2;
						-webkit-box-orient: vertical;
						word-wrap: break-word;
						word-break: break-all;
					}
	
					.txt2 {
						font-size: 28rpx;
						color: #8c8c8c;
						margin-top: 10rpx;
					}
	
					.txt3 {
						color: #A6A6A6;
						font-size: 28rpx;
						margin-top: 8rpx;
					}
				}
			}
	
		}
	}
	
	.status {
		// margin-top: 20rpx;
		height: 48rpx;
		line-height: 48rpx;
		text-align: center;
		border-radius: 8rpx;
		font-size: 24rpx;
		padding: 0 20rpx;
	}

	.title-ongoing {
		color: rgba(2, 173, 130, 1);
		background: rgba(40, 184, 105, 0.2);
	}

	.title-dyz {
		color: rgba(15, 83, 172, 1);
		background-color: rgba(15, 83, 172, 0.2);
	}

	.title-close {
		color: rgba(237, 118, 21, 1);
		background-color: rgba(252, 119, 10, 0.2);
	}

	.title-finish {
		color: rgba(2, 173, 130, 1);
		background-color: rgba(40, 184, 105, 0.2);
	}

	.videoList {
		width: 105px;
		height: 105px;
		margin-left: 5px;
	}

	.list-wrapper2 {
		// padding-bottom: 30rpx;

		.list-item {
			display: flex;
			align-items: center;
			padding: 20rpx;
			background: #fff;
			border-radius: 4px;
			padding: 32rpx;
			border-bottom: 1px solid #f2f2f2;

			.left-icon {
				border-radius: 8rpx;

				image {
					width: 152rpx;
					height: 152rpx;

				}
			}

			.right-txt {
				display: flex;
				flex-flow: column;
				justify-content: space-between;
				padding-left: 32rpx;
				height: 152rpx;

				.txt1 {
					font-size: 16px;
					font-weight: 400;
					color: #2B2B2B;
					overflow: hidden;
					text-overflow: ellipsis;
					display: -webkit-box;
					-webkit-line-clamp: 2;
					-webkit-box-orient: vertical;

				}

				.txt2 {
					color: #8c8c8c;
					font-size: 28rpx;
					margin: 10rpx 0;
				}

				.txt3 {
					font-size: 14px;
					font-weight: 400;
					display: flex;
					justify-content: space-between;
					align-items: center;
					margin: 10rpx 0;
					color: #A6A6A6;
					font-size: 28rpx;
					width: 500rpx;
				}
			}
		}

	}
</style>
